<template>
  <div class="" id="order-details" style="height:100%">
      <div class="echarts-header d-flex items-c" >
      <i class="iconfont icon-fangxiang1 p-all" @click="retu"></i>
      <div class="echarts f-1 d-flex p-r jc-c">订单支付 </div>
    </div>
    <div class="d-flex f-12 jc-c" style="color:#000">
      订单取消:<Times :endTime='endTime'/>
    </div>
    <div class="content">
      <!-- <h1>这是订单信息</h1> -->
       <div class="laji p-all">
        <p class="f-12">收货人：{{name}}噗噗噗</p>
        <p class="f-12">联系方式：{{tel}}13312328987</p>
        <p class="f-12">收货地址：{{address}}上海市虹口足球场</p>
        <div class="van-card"></div>
        </div>
      <div class="pay" v-if="flag">
        <h2>支付方式</h2>
        <ul>
          <li @click="weixin"><i class="iconfont icon-weixinzhifu" style="color: #1afa29;font-size: 0.26rem;"></i><div><span>微信支付</span><strong class="iconfont icon-ziyuanldpi" :class="{ active: num === 1 }"></strong></div></li>
          <li @click="zhifubao"><i class="iconfont icon-zhifubao2" style="color: #1296db;"></i><div><span>支付宝</span><strong class="iconfont icon-ziyuanldpi" :class="{ active: num === 2 }"></strong></div></li>
          <li @click="huabei"><i class="iconfont icon-mayihuabei" style="color: #1296db;margin-top: 0.02rem;"></i><div><span>蚂蚁花呗</span><strong class="iconfont icon-ziyuanldpi" :class="{ active: num === 3 }"></strong></div></li>
        </ul>
        <div class="tip">
          <h3>重要提示：</h3>
          <span>我们将在您完成支付后的24小时内陆续发货。</span>
        </div>
      </div>
      <div class="goods">
        <h2>商品信息</h2>
        <ul>
          <li v-for="(item, index) of list" :key="index">
            <img :src="item.proimg" alt="">
            <div class="price">
              <div>
                <h3>{{ proidCount[index] }}</h3>
              </div>
              <div>
                <p>￥<span>{{item.price.toFixed(2)}}</span></p>
                <p>×<span>{{item.num}}</span></p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="msg">
        <ul>
          <li><h3>发票信息</h3><p><span>电子发票 · 个人 · 商品明细</span><i class="iconfont icon-youjiantou"></i></p></li>
          <li><h3>优惠券</h3><p><span>无可用劵</span><i class="iconfont icon-youjiantou"></i></p></li>
        </ul>
      </div>
      <div class="count">
        <h2>商品金额<span>总计 {{ numCount }} 件商品</span></h2>
        <ul>
          <li><p>商品总计</p><span>￥<strong>{{ priceCount.toFixed(2) }}</strong></span></li>
          <li><p>运费</p><span>+￥<strong>0.00</strong></span></li>
          <li><p style="font-weight: 700;font-size: 0.16rem;">应付金额</p><span style="color: #f00;">￥<strong>{{ priceCount.toFixed(2) }}</strong></span></li>
        </ul>
      </div>

      <!-- END OF TOP -->
      <div class="topay">
        <p>应付金额<span>￥<strong>{{ priceCount.toFixed(2) }}</strong></span></p>
        <van-cell is-link @click="showPopup"><button style="background:#05f">现在支付</button></van-cell>
        <!-- 弹出框 -->
        <van-popup v-model="show"  position="bottom"
         :style="{ height: '60%' }" closeable close-icon-position="top-left" round  >
         <div>
         <p style="text-align:center;border-bottom:1px solid #e3e3e3;line-height:48px;color:#333;font-weight:300">确定订单</p>
         <div style="text-align:center;line-height:48px;font-size:34px;color:#070707">￥{{priceCount.toFixed(2)}}</div>
         <div style="text-align:center;border-bottom:1px solid #e3e3e3;line-height:48px;display:flex;justify-content: space-between;padding:0 5px"><span>支付账号</span><span>136***9650</span></div>
         <div style="text-align:center;border-bottom:1px solid #e9e9e9;line-height:48px;display:flex;justify-content: space-between;padding:0 5px"><span>支付方式</span><van-cell is-link @click="showPopup2"><span style="font-weight:500;color:#000">账户余额＞</span></van-cell></div>
         <div style="position: fixed;bottom:2px;width:100%">
         <van-cell is-link @click="showPopup3"><button style="background:#05f;width:100%">立即付款</button></van-cell>
         </div>
         </div>
         </van-popup>
         <!-- 支付方式选择 -->
        <van-popup v-model="show2"  position="bottom"
         :style="{ height: '60%' }" closeable close-icon-position="top-left" round  >
         <p style="text-align:center;border-bottom:1px solid #e3e3e3;line-height:48px;color:#333;font-weight:300">付款方式</p>
         <ul class="ulul">
           <li><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-huabei"></use></svg></span><span>花呗</span></li>
           <li><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-yue"></use></svg></span><span>账户余额</span></li>
           <li><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-gongshang"></use></svg></span><span>中国工商银行(3255)</span></li>
           <li><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-nongye"></use></svg></span><span>中国农业银行(1902)</span></li>
           <li><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon--"></use></svg></span><span>找朋友代付</span></li>
           <li><span>   </span><span>添加银行卡付款</span></li>
         </ul>
         </van-popup>
         <!-- 支付密码 -->
         <van-popup v-model="show3"  position="bottom"
         :style="{ height: '60%' }" closeable close-icon-position="top-left" round >
         <p style="text-align:center;border-bottom:1px solid #e3e3e3;line-height:48px;color:#333;font-weight:300">输入支付密码</p>
           <van-password-input
            :value="value"
             :error-info='after'
            info="密码为 6 位数字"
            :focused="showKeyboard"
            @focus="showKeyboard = true"
           />
           <van-number-keyboard
            :show="showKeyboard"
             @input="onInput"
            @delete="onDelete"
            @blur="showKeyboard = false"
          />
         </van-popup>
          <van-popup v-model="show4"  position="bottom"
         :style="{ height: '60%' }" closeable close-icon-position="top-left" round >
          </van-popup>
      </div>
    </div>
  </div>
</template>
<script src="./iconfont.js"></script>
<script>
import axios from 'axios'
import Vue from 'vue'
import Times from '@/components/Times.vue'
import { Popup, PasswordInput, NumberKeyboard, Toast,ContactCard, ContactList, ContactEdit } from 'vant'
Vue.use(Popup)
Vue.use(Toast)
Vue.use(PasswordInput).use(NumberKeyboard).use(ContactCard)
  .use(ContactList)
  .use(ContactEdit)
export default {
  data () {
    return {
      num: 1,
      list: [],
      priceCount: 0,
      numCount: 0,
      flag: true,
      address: '',
      tel: '',
      name: '',
      show: false,
      show2: false,
      show3: false,
      show4: false,
      zhifu: false,
      value: '',
      showKeyboard: true,
      after: '',
      proidCount: [],
      endTime: '2019-12-19 19:05:00'
    }
  },
  components: {
    Times
  },
  methods: {
    weixin () {
      this.num = 1
    },
    zhifubao () {
      this.num = 2
    },
    huabei () {
      this.num = 3
    },
    showPopup () {
      this.show = true
    },
    showPopup2 () {
      this.show2 = true
    },
    showPopup3 () {
      this.show3 = true
    },
    onInput(key) {
      console.log(key)
      this.value = (this.value + key).slice(0, 6);
      if (this.value.length === 6) {
         if (this.value === '666666') {
            this.after = '支付成功'
            // axios.get('/order/update?orderid=' + this.$route.query.orderid).then(res => {
            //   Toast.loading({
            //   message: '加载中...',
            //   forbidClick: true
            // })
            // this.$router.push('/success')
            // })
            console.log(this.show4)
         } else {
            this.after = '密码错误'
         }
      }
    },
    onDelete () {
      this.value = this.value.slice(0, this.value.length - 1)
    },
    retu () {
      this.$router.push('/order/all')
    }
  },
  created () {
    // axios.get('/address?userid=' + localStorage.getItem('userid') + '&flag=' + 1).then(res => {
    //   if (res.message === '没有默认地址') {
    //     this.$router.push('/address')
    //   } else {
    //     this.address = res.data.data[0].address
    //     this.name = res.data.data[0].name
    //     this.tel = res.data.data[0].tel
    //   }
    // })
    if (this.$route.query.status === '0') {
      this.flag = true
    } else {
      this.flag = false
    }
    // axios.get('/order?userid=' + this.$route.query.userid + '&orderid=' + this.$route.query.orderid + '&status=' + this.$route.query.status).then(res => {
    //   console.log('details', res.data.data[0].list)
    //   this.list = res.data.data[0].list
    //   this.list.map((item) => {
    //     this.numCount += item.num * 1
    //     this.priceCount += item.num * item.price
    //     // let proid = item.proid
    //     // this.proidCount.push(item.proid)
    //     axios.get('pro/detuil?proid=' + item.proid).then(res => {
    //       this.proidCount.push(res.data.data.title)
    //     })
    //   })
    // })
  }
}
</script>

<style lang="scss" scoped>
@import "@/lib/reset.scss";
#order-details {
    // @include margin(0 0 0 -0.1rem);
    #return {
      float: left;
      font-size: 0.14rem;
      font-weight: normal;
      margin-left: 0.1rem;
    }
  .header {
    @include rect(100%, auto);
    @include font-size(0.24rem);
    .return{
      @include font-size(0.2rem);
    }
  }
  .content {
    @include flex();
    @include rect(100%, auto);
    @include overflow(auto);
    .address {
      @include rect(100%, auto);
      @include background-color(#fff);
      @include margin(0 0 0.1rem);
      @include flexbox();
      @include flex-direction(column);
      h2 {
        @include rect(100%, 0.4rem);
        @include font-size(0.16rem);
        @include color(#333);
        @include padding(0 0 0 0.1rem);
        @include flexbox();
      }
      p {
        @include rect(100%, 0.3rem);
        @include font-size(0.14rem);
        @include color(#666);
        @include padding(0 0 0 0.2rem);
      }
    }
    .pay {
      @include background-color(#fff);
      @include margin(0 0 0.1rem);
      h2 {
        @include rect(100%, 0.35rem);
        @include font-size(0.16rem);
        @include color(#666);
        @include line-height(0.35rem);
        @include padding(0 0 0 0.1rem);
        @include border(0 0 0.01rem, #ccc, solid);
      }
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include flex-direction(column);
        li {
          @include rect(100%, 0.4rem);
          @include border(0 0 0.01rem, #ccc, solid);
          @include padding(0 0 0 0.2rem);
          @include flexbox();
          @include justify-content(space-between);
          i {
            @include rect(0.5rem, 100%);
            @include font-size(0.22rem);
          }
          div {
            @include flex();
            @include rect(auto, 100%);
            @include flexbox();
            @include align-items(center);
            @include justify-content(space-between);
            @include padding(0 0.2rem 0 0);
            span {
              @include font-size(0.18rem);
            }
            strong {
              @include font-size(0.16rem);
              @include display(none);
              &.active {
                @include display(block);
              }
            }
          }
        }
      }
      .tip {
        @include padding(0.08rem 0 0 0.2rem);
        h3 {
          @include color(#666);
          @include font-size(0.14rem);
          @include font-weight(normal);
        }
        span {
          @include color(#999);
          @include font-size(0.12rem);
          @include line-height(0.3rem);
        }
      }
    }
    .goods {
      @include background-color(#fff);
      @include margin(0 0 0.1rem);
      h2 {
        @include rect(100%, 0.35rem);
        @include font-size(0.16rem);
        @include color(#666);
        @include line-height(0.35rem);
        @include padding(0 0 0 0.1rem);
        @include border(0 0 0.01rem, #ccc, solid);
      }
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include flex-direction(column);
        li {
          @include rect(100%, 1.2rem);
          @include border(0 0 0.01rem, #ccc, solid);
          @include padding(0 0 0 0.2rem);
          @include flexbox();
          @include align-items(center);
          // @include justify-content(space-between);
          img {
            @include rect(auto, 1rem);
            @include margin(0 0.1rem 0 0);
          }
          .price {
            @include flexbox();
            @include flex-direction(column);
            div:nth-child(1) {
             @include font-size(0.16rem);
             @include margin(0 0 0.05rem);
            }
            div:nth-child(2) {
              @include flexbox();
              p:nth-child(1) {
                @include color(#f00);
                @include font-size(0.14rem);
                @include font-weight(700);
                @include margin(0 0.1rem 0 0);
                span {
                  @include font-size(0.18rem);
                  @include margin(0 0 0 0.02rem);
                }
              }
              p:nth-child(2) {
                @include color(#666);
                @include font-size(0.16rem);
                @include margin(0.08rem 0 0);
                span {
                  @include margin(-0.05rem 0 0 0.05rem);
                }
              }
            }
            // p:nth-child(1) {
            //   @include color(#f00);
            //   @include font-size(0.14rem);
            //   @include margin(0 0.1rem 0 0);
            //   span {
            //     @include font-size(0.18rem);
            //     @include margin(0 0 0 0.02rem);
            //   }
            // }
            // p:nth-child(2) {
            //   @include color(#666);
            //   @include font-size(0.16rem);
            //   @include margin(0.08rem 0 0);
            //   span {
            //     @include margin(-0.05rem 0 0 0.05rem);
            //   }
            // }
          }
        }
      }
    }
    .msg {
      @include background-color(#fff);
      @include margin(0 0 0.1rem);
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include flex-direction(column);
        li {
          // @include flex();
          @include rect(100%, 0.5rem);
          @include border(0 0 0.01rem, #ccc, solid);
          @include padding(0 0 0 0.2rem);
          @include flexbox();
          @include justify-content(space-between);
          @include align-items(center);
          h3 {
            @include font-size(0.11rem);
          }
          p {
            i {
              @include padding(0 0.1rem);
            }
          }
        }
      }
    }
    .count {
      @include background-color(#fff);
      @include margin(0 0 0.6rem);
      h2 {
        @include rect(100%, 0.35rem);
        @include font-size(0.16rem);
        @include color(#666);
        @include line-height(0.35rem);
        @include padding(0 0 0 0.1rem);
        @include border(0 0 0.01rem, #ccc, solid);
        @include flexbox();
        @include justify-content(space-between);
        span {
          @include font-size(0.14rem);
          @include margin(0 0.2rem 0 0);
        }
      }
      ul {
        @include rect(100%, auto);
        @include flexbox();
        @include flex-direction(column);
        li {
          @include rect(100%, 0.35rem);
          @include border(0 0 0.01rem, #ccc, solid);
          @include padding(0 0 0 0.2rem);
          @include flexbox();
          @include justify-content(space-between);
          @include align-items(center);
          span {
            @include padding(0 0.2rem 0 0);
            strong {
              @include font-size(0.16rem);
            }
          }
        }
      }
    }
    .topay {
      @include rect(100%, 0.5rem);
      @include background-color(#fff);
      position: fixed;
      bottom: 0;
      z-index: 9999;
      @include flexbox();
      @include justify-content(space-between);
      @include align-items(center);
      @include padding(0 0.1rem 0 0.2rem);
      p {
        @include font-size(0.16rem);
        @include font-weight(700);
        span {
          @include color(#f00);
          @include font-size(0.12rem);
          @include margin(0 0 0 0.05rem);
          strong {
            @include font-size(0.16rem);
          }
        }
      }
      button {
        @include padding(0.05rem 0.25rem);
        @include font-size(0.18rem);
        @include color(#fff);
        @include font-weight(700);
        @include background-color(#779ef1);
        @include border-radius(0.05rem);
        border: 0;
      }
    }
  }
}
.ulul{
 li{
  border-bottom:1px solid #e9e9e9;
  line-height:48px;
  display:flex;
  padding:0 5px;
  span{
    margin: 0 10px
  }
}
}

.icon {
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
.van-card{
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: -webkit-repeating-linear-gradient(135deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
    background: repeating-linear-gradient(-45deg,#ff6c6c 0,#ff6c6c 20%,transparent 0,transparent 25%,#1989fa 0,#1989fa 45%,transparent 0,transparent 50%);
    background-size: 80px;
    content: '';
}
 .laji{
         position: relative;
       }
</style>
